<template>
    <div class="artile-item"  @click="$router.push(`/articleDetail/${article.id}`)">
        <div class="author-info">
            <img :src="article.avatar">
            <div class="mianjinTopRight">
                <h4 class="article-title">{{ article.stem }}</h4>
                <p class="article-author">青春|{{ article.createdAt }}</p>
            </div>
        </div>
        <p class="article-content">
            {{ cleanContent }}
        </p>
        <div class="author-state">
            点赞 {{ article.likeCount }} | 浏览 {{ article.views }}
        </div>
    </div>
</template>

<script>
export default {
    props:{
        article:Object
    },
    computed: {
        cleanContent(){
            return this.article.content.replace(/<[^>]*>/g, "")
        }
    },
}
</script>

<style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
    }
.artile-item{
    padding: 40px 40px 0 40px;
    .author-info{
        display: flex;
        justify-content: start;
        img{
            width: 100px;
            height: 100px;
        }
        .mianjinTopRight{
            margin-left: 30px;
            display: flex;
            flex-direction: column;
            align-items: start;

            .article-title{
                font-size: 38px;
            }
            .article-author{
            margin-top: 5px;
                font-size: 30px;
                color: gray;
            }
        }
    }
    .article-content{
        margin-top: 8px;
        margin-bottom: 8px;
        height: 88px;
        font-size: 33px;

        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .author-state{
            margin-top: 5px;
        font-size: 30px;
        color: gray;
    }
}
</style>